<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<link href="/css/bootstrap.min.css" rel="stylesheet">-->
<link href="/fonts/iconfont/iconfont.css" rel="stylesheet">
<link type="text/css" href="/lib/vide7.5.5/css/video-js.min.css" rel="stylesheet">
<!--summernote css -->
<!--<link type="text/css" href="/css/plugins/summernote/summernote-lite.css" rel="stylesheet">-->
<!--<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-lite.css" rel="stylesheet">-->
<head th:include="cultivateWeb/header :: culHeaderCss"></head>

<body style="overflow: auto">
<!-- 顶部导航 -->
<header th:include="cultivateWeb/header :: header(true)"></header>
<link type="text/css" href="/css/cultivateWeb/style/course.css" rel="stylesheet">

<style>
    .layui-layer-content {
        display: flex;
    }

    .dis_row {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .dis_column {
        display: flex;
        flex-direction: column;
    }

    .a_center {
        align-items: center;
    }

    .j_center {
        justify-content: center;
    }

    .discuss_top {
        background: #ffffff;
        margin-top: 0px;
        width: 100%;
        font-size: 16px;
        color: #999;
        border-bottom: 1px solid #dfdfdf;
        /* height: 150px;*/
        height: 80px;
    }

    .discuss_top_title {
        margin-top: 0px;
        width: 100%;
        color: #999;
        height: 80px;
    }

    .discuss_top_content {
        margin-top: 0px;
        width: 100%;
        color: #666;
        height: auto;
    }

    .discuss_list {
        background: #ffffff;
        margin-top: 0px;
        width: 100%;
        font-size: 16px;
        color: #999;
    }

    .discuss_buttons {
        margin-top: 0px;
        width: 100%;
        font-size: 16px;
        height: 200px;
        background-color: #f5f5f5;
    }

    .discuss_buttons_textarea {
        width: 85%;
        border: 1px solid #ccc;
        border-radius: 4px;
        color: #555;
        background: #ffffff;
        padding: 4px 4px;
    }

    .discuss_buttons_send {
        width: 100px;
        height: 35px;
        border-radius: 10px;
        background-color: #22ac38;
        color: #ffffff;
        text-align: center;

    }

    .mycssaadd:hover {
        cursor: pointer;
    }
    .layui-border-blue{
        color: #0069ac!important;
        border-color: #0069ac!important;
    }
/*    播放器样式*/
    .vjs-icon-placeholder,
    .vjs-remaining-time-display{
        color:#fff;
    }
    .vjs-modal-dialog-content{
        color:#fff!important;
        display: flex;
        justify-content: center;
        align-items: center;
        padding-top: 100px!important;
    }

</style>
<input type="hidden" id="myAllData" th:value="${myAllData}"/>
<input type="hidden" id="fatherId" th:value="${fatherId}"/>
<div style="background: #f3f3f3">
    <div class="layui-container  main-md">
        <p style="line-height: 60px">
            <a href="/cultivate/courseIndex?pageSign=1" id="header-mytitle">精品课程</a>/ <span style="color:#4b90be">课程详情</span>
        </p>
    </div>


    <section class="main-md" style="background: #f3f3f3; padding-top: 0px;">
        <style>
            .video-js .vjs-tech {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
        </style>
        <div style="display: flex; background: #ffffff; padding: 20px;  margin: 0;" id="ImgDiv">
            <p><img th:src="${cou.introducePortrait}" class="courimg" style="margin: 0; width: 400px;  height: 240px;"
                    id="courseImg"></p>
            <div class="div_1" style="height: 240px;">
                <input type="hidden" id="courseId" th:value="${cou.id}"/>

                <span class="span_1" th:text="${cou.name}"></span>

                <div style="display: flex; flex-direction: row;     flex-wrap: wrap; justify-content: flex-start;">
                    <span class="span_2" style="width: auto;">
                         共<span th:text="${chapter}"></span>章<span th:text="${chapterDOS}"></span>小节
                    </span>

                    <span class="span_2" style="width: auto; margin-left: 20px;">
<!--                                <i class="layui-icon layui-icon-form"></i>-->
                                已有<span style="margin-left:5px;color:#fe7252" th:text="${cou.browseNum}"></span>人学过</span>

                </div>
                <div style="display: flex; flex-direction: row;     flex-wrap: wrap;  justify-content: flex-start;">
                    <span class="span_2" style="width: auto;">授课老师：<span th:text="${cou.couName}"></span></span>
                </div>
                <span>

                    <!--<a th:href="@{'/traCourses/selCourseOrder?id='+${cou.id}}">-->
                         <input style="margin-left: 10px;width: 200px;
    height: 50px;" type="button" value="立即学习" onclick="submit()" class="myblue layui-btn layui-btn-normal"/>
                    <!--</a>-->
                        </span>
            </div>
            <div style="clear: both"></div>
        </div>
        <div style="display: none; background: #ffffff; padding: 20px;  margin: 0;height: 500px;"
             id="ImgVideo">

        </div>


        <div class="div_2" id="mydiv2" style="background: #ffffff; margin-top: 20px;    height: auto;  ">
            <div style="height: 50px;display: flex">
                <span class="span_3 active1">课程简介</span>
                <span class="span_3">课程目录</span>
            </div>
            <hr style="margin: auto"/>
            <!-- 课程简介 -->
            <div style="font-size: 14px;  margin: 30px;" id="introduce">
                <p style="font-size: 14px;" th:if="${not #strings.isEmpty(cou.couIntroduce)}"
                   th:text="${cou.couIntroduce}"></p>
                <p style="font-size: 14px;" th:if="${#strings.isEmpty(cou.couIntroduce)}">暂无数据</p>
            </div>


            <!-- 课程章节 -->
            <div style="font-size: 14px; margin:30px 0;display: none" id="chapterList">

                <div class="layui-collapse" lay-accordion id="chapterList1"  style="border: 0px;">
                    <th:block th:if="${myAllData}">
                        <div class="layui-colla-item" th:each="item1,loopStatus : ${myAllData}">
                            <th:block
                                    th:if="${item1.name} and ((${item1.chapterDocuments} and ${item1.chapterDocuments.size()>0})or (${item1.chapterDOS} and ${item1.chapterDOS.size()>0}))">
                                <div class="layui-colla-title"
                                     style=" display: flex; flex-direction: row;     flex-wrap: wrap;">
                                    <span th:text="${item1.name}"></span>
                                    <div style="width: 20px;"></div>
                                    <th:block th:if="${item1.chapterDocuments}">
                                        <th:block th:each="item2 : ${item1.chapterDocuments}">
                                            <th:block th:if="${item2.type} eq 3">
                                                <i class="layui-icon layui-icon-play mycssaadd"
                                                   style="font-size: 20px;margin: 0 5px;"
                                                   th:onclick="'javascript:getVideos1(\''+${item2.file}+'\',\''+${item2.id}+'\',\''+${item2.type}+'\',this);'"></i>
                                            </th:block>
                                        </th:block>
                                    </th:block>
                                </div>
                            </th:block>
                            <th:block
                                    th:unless="${item1.name} and ((${item1.chapterDocuments} and ${item1.chapterDocuments.size()>0})or (${item1.chapterDOS} and ${item1.chapterDOS.size()>0}))">
                                <div style="padding: 10px 35px; display: flex; flex-direction: row;     flex-wrap: wrap;">
                                    <span th:text="${item1.name}"></span>
                                    <div style="width: 20px;"></div>
                                    <th:block th:if="${item1.chapterDocuments}">
                                        <th:block th:each="item2 : ${item1.chapterDocuments}">
                                            <th:block th:if="${item2.type} eq 3">
                                                <i class="layui-icon layui-icon-play mycssaadd"
                                                   style="font-size: 20px;margin: 0 5px;"
                                                   th:onclick="'javascript:getVideos1(\''+${item2.file}+'\',\''+${item2.id}+'\',\''+${item2.type}+'\',this);'"></i>
                                            </th:block>
                                        </th:block>
                                    </th:block>
                                </div>
                            </th:block>
                            <div class="layui-colla-content " style="padding-left: 35px;border: 0px;">
                                <th:block th:if="${item1.chapterDocuments}">
                                    <div style="width: 100%; width: calc(100% - 80px);   margin: 10px 40px; display: flex;  overflow-y: auto;">
                                        <th:block th:each="item2 : ${item1.chapterDocuments}">
                                            <th:block th:if="${item2.type} eq 1">
                                                <button type="button"
                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                        th:onclick="'javascript:getZip(\''+${item2.file}+'\');'"
                                                >
                                                    压缩包
                                                </button>
                                            </th:block>
                                            <th:block th:if="${item2.type} eq 2">
                                                <button type="button"
                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                        th:onclick="'javascript:getWords(\''+${item2.id}+'\');'"
                                                >
                                                    文档
                                                </button>
                                            </th:block>
                                            <th:block th:if="${item2.type} eq 4">
                                                <button type="button"
                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                        style="height: 30px;   display: flex; justify-content: center;
                                                    align-items: center;  margin: 10px 20px 10px 0px;"
                                                        th:onclick="'javascript:getImages(\''+${item2.file}+'\');'">
                                                    图片
                                                </button>
                                            </th:block>
                                            <th:block th:if="${item2.type} eq 5">
                                                <button type="button"
                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                        th:onclick="'javascript:getAudio(\''+${item2.file}+'\',\''+${item2.id}+'\',\''+${item2.type}+'\');'"
                                                >
                                                    音频
                                                </button>
                                            </th:block>
                                        </th:block>
                                    </div>
                                </th:block>
                                <th:block th:if="${item1.chapterDOS}">
                                    <div class="layui-collapse" lay-accordion  style="border: 0px;">

                                        <div th:each="item2 : ${item1.chapterDOS}"
                                             class="layui-colla-item"
                                             style="width: 100%; width: calc(100% - 80px);   margin: 10px 40px;   ">

                                            <th:block
                                                    th:if="${item2.name} and ((${item2.chapterDocuments} and ${item2.chapterDocuments.size()>0})or (${item2.chapterDOS} and ${item2.chapterDOS.size()>0}))">
                                                <div class="layui-colla-title"
                                                     style=" display: flex;  flex-direction: row; justify-content: flex-start;     flex-wrap: wrap;   margin: 10px 0;">
                                                    <th:block th:if="${item2.name}">
                                                        <span th:text="${item2.name}"></span>
                                                        <div style="width: 20px;"></div>
                                                        <th:block th:if="${item2.chapterDocuments}">
                                                            <th:block th:each="item3 : ${item2.chapterDocuments}">
                                                                <th:block th:if="${item3.type} eq 3">
                                                                    <i class="layui-icon layui-icon-play mycssaadd"
                                                                       style="font-size: 20px; margin: 0 5px;"
                                                                       th:onclick="'javascript:getVideos1(\''+${item3.file}+'\',\''+${item3.id}+'\',\''+${item3.type}+'\',this);'"></i>
                                                                </th:block>
                                                            </th:block>
                                                        </th:block>
                                                    </th:block>
                                                    <!--                                    <span>09:28</span>-->
                                                </div>
                                            </th:block>
                                            <th:block
                                                    th:unless="${item2.name} and ((${item2.chapterDocuments} and ${item2.chapterDocuments.size()>0})or (${item2.chapterDOS} and ${item2.chapterDOS.size()>0}))">
                                                <div style="padding: 10px 35px;  display: flex;  flex-direction: row; justify-content: flex-start;     flex-wrap: wrap;   margin: 10px 0;">
                                                    <th:block th:if="${item2.name}">
                                                        <span th:text="${item2.name}"></span>
                                                        <div style="width: 20px;"></div>
                                                        <th:block th:if="${item2.chapterDocuments}">
                                                            <th:block th:each="item3 : ${item2.chapterDocuments}">
                                                                <th:block th:if="${item3.type} eq 3">
                                                                    <i class="layui-icon layui-icon-play mycssaadd"
                                                                       style="font-size: 20px; margin: 0 5px;"
                                                                       th:onclick="'javascript:getVideos1(\''+${item3.file}+'\',\''+${item3.id}+'\',\''+${item3.type}+'\',this);'"></i>
                                                                </th:block>
                                                            </th:block>
                                                        </th:block>
                                                    </th:block>
                                                </div>
                                            </th:block>

                                            <div class="layui-colla-content "
                                                 style="padding-left: 35px;margin: 10px 0;border: 0px;">
                                                <!--                                                display: flex;  flex-direction: column; justify-content: flex-start;    -->
                                                <th:block th:if="${item2.chapterDocuments}">
                                                    <div style=" display: flex;  flex-direction: row; flex-wrap: wrap;overflow-y: auto;">
                                                        <th:block th:each="item3 : ${item2.chapterDocuments}">
                                                            <th:block th:if="${item3.type} eq 1">
                                                                <button type="button"
                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                        th:onclick="'javascript:getZip(\''+${item3.file}+'\');'"
                                                                >
                                                                    压缩包
                                                                </button>
                                                            </th:block>
                                                            <th:block th:if="${item3.type} eq 2">
                                                                <button type="button"
                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                        th:onclick="'javascript:getWords(\''+${item3.id}+'\');'"
                                                                >
                                                                    文档
                                                                </button>
                                                            </th:block>
                                                            <th:block th:if="${item3.type} eq 4">
                                                                <button type="button"
                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                        th:onclick="'javascript:getImages(\''+${item3.file}+'\');'"
                                                                >
                                                                    图片
                                                                </button>
                                                            </th:block>
                                                            <th:block th:if="${item3.type} eq 5">
                                                                <button type="button"
                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                        th:onclick="'javascript:getAudio(\''+${item3.file}+'\',\''+${item3.id}+'\',\''+${item3.type}+'\');'"
                                                                >
                                                                    音频
                                                                </button>
                                                            </th:block>
                                                        </th:block>
                                                    </div>
                                                </th:block>
                                                <th:block th:if="${item2.chapterDOS}">
                                                    <div class="layui-collapse" lay-accordion style="border: 0px;">

                                                        <div th:each="item3 : ${item2.chapterDOS}"
                                                             class="layui-colla-item"
                                                             style="width: 100%; width: calc(100% - 80px);   margin: 10px 40px;  ">

                                                            <th:block
                                                                    th:if="${item3.name} and ((${item3.chapterDocuments} and ${item3.chapterDocuments.size()>0})or (${item3.chapterDOS} and ${item3.chapterDOS.size()>0}))">
                                                                <div class="layui-colla-title"
                                                                     style=" display: flex;  flex-direction: row; justify-content:flex-start; flex-wrap: wrap; margin: 10px 0;">
                                                                    <th:block th:if="${item3.name}">
                                                                        <span th:text="${item3.name}"></span>
                                                                        <div style="width: 20px;"></div>
                                                                        <th:block th:if="${item3.chapterDocuments}">
                                                                            <th:block
                                                                                    th:each="item4 : ${item3.chapterDocuments}">
                                                                                <th:block th:if="${item4.type} eq 3">
                                                                                    <i class="layui-icon layui-icon-play mycssaadd"
                                                                                       style="font-size: 20px; margin: 0 5px;"
                                                                                       th:onclick="'javascript:getVideos1(\''+${item4.file}+'\',\''+${item4.id}+'\',\''+${item4.type}+'\',this);'"></i>
                                                                                </th:block>
                                                                            </th:block>
                                                                        </th:block>
                                                                    </th:block>
                                                                    <!--                                    <span>09:28</span>-->
                                                                </div>
                                                            </th:block>
                                                            <th:block
                                                                    th:unless="${item3.name} and ((${item3.chapterDocuments} and ${item3.chapterDocuments.size()>0})or (${item3.chapterDOS} and ${item3.chapterDOS.size()>0}))">
                                                                <div style="padding: 10px 35px; display: flex;  flex-direction: row; justify-content:flex-start; flex-wrap: wrap; margin: 10px 0;">
                                                                    <th:block th:if="${item3.name}">
                                                                        <span th:text="${item3.name}"></span>
                                                                        <div style="width: 20px;"></div>
                                                                        <th:block th:if="${item3.chapterDocuments}">
                                                                            <th:block
                                                                                    th:each="item4 : ${item3.chapterDocuments}">
                                                                                <th:block th:if="${item4.type} eq 3">
                                                                                    <i class="layui-icon layui-icon-play mycssaadd"
                                                                                       style="font-size: 20px; margin: 0 5px;"
                                                                                       th:onclick="'javascript:getVideos1(\''+${item4.file}+'\',\''+${item4.id}+'\',\''+${item4.type}+'\',this);'"></i>
                                                                                </th:block>
                                                                            </th:block>
                                                                        </th:block>
                                                                    </th:block>
                                                                    <!--                                    <span>09:28</span>-->
                                                                </div>
                                                            </th:block>

                                                            <div class="layui-colla-content " style="padding-left: 35px;margin: 10px 0;border: 0px;">
                                                                <th:block th:if="${item3.chapterDocuments}">
                                                                    <div style=" display: flex;  flex-direction: row; flex-wrap: wrap;overflow-y: auto;">
                                                                        <th:block
                                                                                th:each="item4 : ${item3.chapterDocuments}">
                                                                            <th:block th:if="${item4.type} eq 1">
                                                                                <button type="button"
                                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                                        th:onclick="'javascript:getZip(\''+${item4.file}+'\');'"
                                                                                >
                                                                                    压缩包
                                                                                </button>
                                                                            </th:block>
                                                                            <th:block th:if="${item4.type} eq 2">
                                                                                <button type="button"
                                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                                        th:onclick="'javascript:getWords(\''+${item4.id}+'\');'"
                                                                                >
                                                                                    文档
                                                                                </button>
                                                                            </th:block>
                                                                            <th:block th:if="${item4.type} eq 4">
                                                                                <button type="button"
                                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                                        th:onclick="'javascript:getImages(\''+${item4.file}+'\');'"
                                                                                >
                                                                                    图片
                                                                                </button>
                                                                            </th:block>
                                                                            <th:block th:if="${item4.type} eq 5">
                                                                                <button type="button"
                                                                                        class="layui-btn-primary layui-border-blue layui-btn layui-btn-radius"
                                                                                        style="height: 30px;   display: flex; justify-content: center;
                                                align-items: center;  margin: 10px 20px 10px 0px;"
                                                                                        th:onclick="'javascript:getAudio(\''+${item4.file}+'\',\''+${item4.id}+'\',\''+${item4.type}+'\');'"
                                                                                >
                                                                                    音频
                                                                                </button>
                                                                            </th:block>
                                                                        </th:block>
                                                                    </div>
                                                                </th:block>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </th:block>
                                            </div>
                                        </div>

                                    </div>
                                </th:block>
                            </div>
                        </div>
                    </th:block>
                    <th:block th:if="${myAllData.size()==0}">
                        <div style="margin: 10px;"> 暂无数据</div>
                    </th:block>

                </div>


            </div>
        </div>

    </section>

</div>

<!-- footer ------------------------------------------------------- -->
<div class="footer" th:include="cultivateWeb/header :: footer"></div>
</body>
<script src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/xlPaging.js"></script>
<script type="text/javascript" src="/js/bootstrap.min.js"></script>
<script src="/lib/vide7.5.5/js/video.min.js"></script>
<script>
    let CommentList = [];
    let rootItem = [];
    let layer;
    let myPlayer=null;
    let myPlayernumber=0
    //页面数据
    const mypageData = {}


    $(() => {
        location.href.split('?')[1].split('&').forEach((item) => {
            mypageData[item.split("=")[0]] = item.split("=")[1]
        })
        window.addEventListener("hashchange",()=> {
            //播放停止去除
            if(myPlayernumber!=0){
                  myPlayer.pause();
                  myPlayer.dispose();
                myPlayernumber=0;
            }
        } );
        $("#header-mytitle").text(mypageData.pageSign == '1' ? '精品课程' : '自建课程')
        $("#header-mytitle").attr('href', mypageData.pageSign == '1' ? "/cultivate/courseIndex?pageSign=1" : "/cultivate/courseIndex?pageSign=2")
        //设置video
        videojs.addLanguage('zh-CN', {
            "Play": "播放",
            "Pause": "暂停",
            "Current Time": "当前时间",
            "Duration": "时长",
            "Remaining Time": "剩余时间",
            "Stream Type": "媒体流类型",
            "LIVE": "直播",
            "Loaded": "加载完毕",
            "Progress": "进度",
            "Fullscreen": "全屏",
            "Non-Fullscreen": "退出全屏",
            "Mute": "静音",
            "Unmute": "取消静音",
            "Playback Rate": "播放速度",
            "Subtitles": "字幕",
            "subtitles off": "关闭字幕",
            "Captions": "内嵌字幕",
            "captions off": "关闭内嵌字幕",
            "Chapters": "节目段落",
            "Close Modal Dialog": "关闭弹窗",
            "Descriptions": "描述",
            "descriptions off": "关闭描述",
            "Audio Track": "音轨",
            "You aborted the media playback": "视频播放被终止",
            "A network error caused the media download to fail part-way.": "网络错误导致视频下载中途失败。",
            "The media could not be loaded, either because the server or network failed or because the format is not supported.": "视频因格式不支持或者服务器或网络的问题无法加载。",
            "The media playback was aborted due to a corruption problem or because the media used features your browser did not support.": "由于视频文件损坏或是该视频使用了你的浏览器不支持的功能，播放终止。",
            "No compatible source was found for this media.": "无法找到此视频兼容的源。",
            "The media is encrypted and we do not have the keys to decrypt it.": "视频已加密，无法解密。",
            "Play Video": "播放视频",
            "Close": "关闭",
            "Modal Window": "弹窗",
            "This is a modal window": "这是一个弹窗",
            "This modal can be closed by pressing the Escape key or activating the close button.": "可以按ESC按键或启用关闭按钮来关闭此弹窗。",
            ", opens captions settings dialog": ", 开启标题设置弹窗",
            ", opens subtitles settings dialog": ", 开启字幕设置弹窗",
            ", opens descriptions settings dialog": ", 开启描述设置弹窗",
            ", selected": ", 选择",
            "captions settings": "字幕设定",
            "Audio Player": "音频播放器",
            "Video Player": "视频播放器",
            "Replay": "重播",
            "Progress Bar": "进度小节",
            "Volume Level": "音量",
            "subtitles settings": "字幕设定",
            "descriptions settings": "描述设定",
            "Text": "文字",
            "White": "白",
            "Black": "黑",
            "Red": "红",
            "Green": "绿",
            "Blue": "蓝",
            "Yellow": "黄",
            "Magenta": "紫红",
            "Cyan": "青",
            "Background": "背景",
            "Window": "视窗",
            "Transparent": "透明",
            "Semi-Transparent": "半透明",
            "Opaque": "不透明",
            "Font Size": "字体尺寸",
            "Text Edge Style": "字体边缘样式",
            "None": "无",
            "Raised": "浮雕",
            "Depressed": "压低",
            "Uniform": "均匀",
            "Dropshadow": "下阴影",
            "Font Family": "字体库",
            "Proportional Sans-Serif": "比例无细体",
            "Monospace Sans-Serif": "单间隔无细体",
            "Proportional Serif": "比例细体",
            "Monospace Serif": "单间隔细体",
            "Casual": "舒适",
            "Script": "手写体",
            "Small Caps": "小型大写字体",
            "Reset": "重启",
            "restore all settings to the default values": "恢复全部设定至预设值",
            "Done": "完成",
            "Caption Settings Dialog": "字幕设定视窗",
            "Beginning of dialog window. Escape will cancel and close the window.": "开始对话视窗。离开会取消及关闭视窗",
            "End of dialog window.": "结束对话视窗"
        });

        //获取到数据
        layui.use(['layer', 'element'], () => {
            layer = layui.layer;
            console.log('加载完成layer')
            layui.element.init();
            $("#message").focus(function () {
                $("#messageDiv").css("border", "1px solid #22ac38");
            });

            /*$('.summernote').summernote({
                height : '220px',
                lang : 'zh-CN',
                callbacks: {
                    onImageUpload: function(files, editor, $editable) {
                        sendFile(files);
                    }
                }
            });*/


            // $("#chapterList").find(".chapter_" + selChapterListFirst).toggle();
            $(".span_3").click(async function () {
                $(this).addClass("active1");
                $(this).siblings().removeClass("active1");



                // //播放停止去除
                // if(myPlayernumber!=0){
                //     console.log('播放停止去除播放停止去除播放停止去除')
                //     await myPlayer.pause();
                //     await myPlayer.dispose();
                //     myPlayernumber=0;
                //     $("#ImgDiv").css('display', 'flex');
                //     $("#ImgVideo").css('display', 'none');
                // }else{
                //     $("#ImgDiv").css('display', 'flex');
                //     $("#ImgVideo").css('display', 'none');
                // }
                if ($(this).text() == '课程简介') {
                    $("#chapterList").hide();

                    $("#introduce").show();

                } else if ($(this).text() == '课程目录') {
                    //设置三角形位置
                    $('.layui-colla-icon').each(function () {
                        const item = $(this)
                        item.css("left", 'unset')
                        item.css("right", '15px')
                    })
                    $("#introduce").hide();

                    $("#chapterList").show();
                }
            });
            var chapterIds = $('#chapterIds').val();
        })

    });
    //增加次数
    const updataNumber = (id, movement, type) => {
        console.log("数据===》", id, type);
        $.ajax({
            url: '/chapterDocument/tapUpdate',
            type: 'POST',
            data: {
                // "frequency": 1,
                // "id": id,
                "movement": movement,
                "type": type
            },
            success: function (r) {
                console.log('记录增加==》》》》', r)
                // if (r.code == 0) {
                // } else {
                //     layer.msg(r.msg);
                // }
            }
        })
        if (null != id && '' != id) {
            //视频次数
            $.ajax({
                url: '/couInfo/addBrowseNum',
                type: 'POST',
                data: {"id": $("#fatherId").val()},
                success: function (r) {
                    console.log('记录增加==》》》》', r)
                }
            })
        }
    }

    //视频
    const getVideos1 = (item, id, type, el) => {
        //获取所有的
        const all = $("#chapterList .mycssaadd")
        for (let i = 0; i < all.length; i++) {
            if (all[i] == el) {
                $(all[i]).addClass('layui-icon-video');
                $(all[i]).removeClass('layui-icon-play');
            } else {
                $(all[i]).removeClass('layui-icon-video');
                $(all[i]).addClass('layui-icon-play');
            }
        }
        getAudio(item, id, type)
    }
    //音频
    const getAudio = (item, id, type) => {
        //
        updataNumber(id, 0, type)
        if(myPlayernumber!=0){
            console.log('播放停止去除播放停止去除播放停止去除')
            myPlayer.pause();
            myPlayer.dispose();
            myPlayernumber=0;
        }

        var xianshi = `

<video id="my-video_html5_api" style="width: 100%;height: 100%;"
x5-video-player-fullscreen="false"
 controls preload="auto"
width="100%" height="100%" data-setup="{}" tabindex="-1"
data-setup="{}" preload="auto" x5-video-player-fullscreen="false"
class=" vjs-tech video-js vjs-big-play-centered vjs-paused my-video-dimensions vjs-controls-enabled vjs-workinghover vjs-v7 vjs-user-active"
style="width: 100%;height: 100%;"
id="my-video" tabindex="-1" lang="zh-cn" role="region" aria-label="视频播放器"
>
                <source src="${item}" type="video/mp4">
                 </video>
             `;
        $("#ImgVideo").html(xianshi);
        console.log('== videojs===')
            myPlayer = videojs(`my-video_html5_api`,{},
                function () {
                    $("#ImgDiv").css('display', 'none');
                    $("#ImgVideo").css('display', 'flex');
                    console.log('初始化完成...', this);
                    myPlayernumber++;
                    myPlayer.ready(function () {
                        myPlayer.play()
                        console.log('视频加载',myPlayer)
                    });
                    myPlayer.on('error', function(){
                       //错误销毁
                        if(myPlayernumber!=0){
                           //视频播放buliao
                            myPlayer.pause();
                        }
                    })
                });


    }
    //图片
    const getImages = (item) => {
        //记录
        updataNumber(null, 0, 4)
        console.log('显示图片', item)
        layer.open({
            type: 1,
            title: '预览',
            closeBtn: 1,
            area: ['800px', '800px'],
            shadeClose: true,
            offset: 't',
            content: `<img style="margin: auto;width: 700px;height: 700px;" src="${item}" />`
        });
    }
    //文档
    const getWords = (resourceId) => {
        console.log('显示文档', resourceId)
        //记录
        updataNumber(null, 0, 2)
        var loading = layer.load('加载中...');
        //获取
        $.ajax({
            url: "/couInfo/documentConversion",
            type: "POST",
            data: {
                resourceId: resourceId
            },
            dataType: "json",
            success: function (r) {
                if (r.code == '200' || r.code == 200) {
                    if (r.data.pdfUrl) {
                        //http只能进行下载本地临时地址访问
                        $.ajax({
                            url: r.data.pdfUrl,
                            mimeType: 'text/plain; charset=x-user-defined',
                            cache: true,
                            type: "GET",
                            async: false,
                            success: function (data) {
                                layer.close(loading);
                                var rawLength = data.length;
                                var array = new Uint8Array(new ArrayBuffer(rawLength));
                                for (i = 0; i < rawLength; i++) {
                                    array[i] = data.charCodeAt(i) & 0xff;
                                }
                                //上面是把后台请求到的文件流进行转化为符合的流
                                var blob = new Blob([array], {type: 'application/pdf;charset-UTF-8'});
                                let file = window.URL.createObjectURL(blob)
                                layer.open({
                                    type: 2,
                                    title: '预览',
                                    closeBtn: 1,
                                    area: ['1200px', '700px'],
                                    fixed: false,
                                    maxmin: true,
                                    content: file
                                });

                            },
                            error: function (err) {
                                layer.close(loading);
                                console.log("错误")
                            }
                        });
                        // layer.open({
                        //     type: 2,
                        //     title: '预览',
                        //     closeBtn: 1,
                        //     area: [ '800px', '800px' ],
                        //     fixed: false,
                        //     maxmin: true,
                        //     content:r.data.pdfUrl
                        // });
                    } else {
                        layer.close(loading);
                        layer.msg("请重试")
                    }
                } else {
                    layer.close(loading);
                    layer.msg("暂无数据")
                }
            },
            error: function (err) {
                layer.close(loading);
            }
        });

    }
    //压缩包
    const getZip = (file) => {
        //统计下载
        updataNumber(null, 1, 1)
        updataNumber(null, 0, 1)
        console.log("压缩包", file)
        layer.msg("正在下载")
        const a = document.createElement('a')
        a.style.display = 'none'
        a.href = file
        a.click()
    }

    function reply(index, rootId) {
        rootItem = CommentList[index];
        console.log("rootItem:" + JSON.stringify(rootItem));
        $("#commentListDiv").hide();

        console.log("rootId:" + rootId);
        $("#rootId").val(rootId);
        let pageRootId = $("#rootId").val();

    }


    //开始学习
    function submit() {
        //打第一张第一节
        //获取所有的
        const all = $("#chapterList .mycssaadd")
        console.log("alll", all.length)
        if (all.length > 0) {
            let allspan = $(".span_3")
            let allspanItem = null
            for (let j = 0; j < allspan.length; j++) {
                if (allspan[j].innerText.trim().indexOf("目录") > -1) {
                    allspanItem = allspan[j]
                }
            }
            $(allspanItem).addClass("active1");
            $(allspanItem).siblings().removeClass("active1");
            //设置cssname
            //判断一下
            //
            if ($(all[0]).parent().parent().parent().prop("class").indexOf("layui-colla-content") > -1) {
                $(all[0]).parent().parent().parent().addClass("layui-show")
                $(all[0]).prev().addClass("layui-show")
            } else if ($(all[0]).parent().parent().parent().parent().prop("class").indexOf("layui-colla-content") > -1) {
                $(all[0]).parent().parent().parent().parent().addClass("layui-show")
                $(all[0]).parent().prev().addClass("layui-show")
            }

            $("#ImgDiv").css('display', 'flex');
            $("#ImgVideo").css('display', 'none');
            $('.layui-colla-icon').each(function () {
                const item = $(this)
                item.css("left", 'unset')
                item.css("right", '15px')
            })


            $("#introduce").hide();
            $("#chapterList").show();
            $('#extendList').hide();
            $('#courseAndAsk').hide();
            console.log("点击事件")


            all[0].click();
            console.log("点击事件完成")
        } else {
            layer.msg("暂无视频数据")
        }
        // let allButton= $("#chapterList button")
        //  let allspan=$(".span_3")

        //  for (let i=0;i<allButton.length;i++){
        //      let item=allButton[i]
        //      if(item.innerText.trim().indexOf("视频")>-1){
        //          //设置cssname
        //          $(item).parent().parent().addClass("layui-show")
        //          //下面点击
        //          //设置三角形位置
        //
        //          $("#ImgDiv").css('display', 'flex');
        //          $("#ImgVideo").css('display', 'none');
        //          $('.layui-colla-icon').each(function () {
        //              const item = $(this)
        //              item.css("left", 'unset')
        //              item.css("right", '15px')
        //          })
        //
        //
        //          $("#introduce").hide();
        //          $("#chapterList").show();
        //          $('#extendList').hide();
        //          $('#courseAndAsk').hide();
        //          item.click();
        //          return;
        //      }
        //  }

    }


</script>

</html>